<template>
  <view class="page container">
    <view class="mb-32">
      <swiper class="swiper" :current="defaultCurrent">
        <swiper-item v-for="(item, index) in vipLeaveList" :key="index">
          <view class="swiper-item flex-center-center">
            <!-- 当前等级标识 -->
            <view class="dq-tag" :style="{ color: item.color }" v-if="item.level_id == userInfo.level_id">当前等级</view>
            <u-image width="630rpx" height="370rpx" :src="item.vip_bg"></u-image>
            <view class="tip" :style="{ color: item.color }">{{ item.tip }}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="br-16 bgc-fff pad-32 flex">
      <view class="flex-column w-280">
        <view class="fs-28 mb-8">下一等级升级条件</view>
        <view class="c-677585 fs-28" v-if="nextLevelInfo.level_id">
          银卡累计积分满{{ nextLevelInfo.leave_gold }}或单笔消费满{{
            nextLevelInfo.leave_consume
          }}元
        </view>
        <view class="c-677585 fs-28" v-else> 您已达到最高等级 </view>
      </view>
      <view class="h-134 w-1 bgc-f7f8fa ml-48 mr-32"></view>
      <view class="flex-column">
        <text class="fs-28 mb-8">当前等级有效期</text>
        <text class="fs-28 c-677585">永久有效</text>
      </view>
    </view>
    <view class="br-16 bgc-fff pad-32 mt-32">
      <view class="fs-28">会员权益</view>
      <view class="quanyi">
        <view class="flex-column flex-center-center">
          <u-image width="76rpx" height="76rpx" radius="76rpx" src="/static/user/qy-1.png"> </u-image>
          <text class="fs-22 mt-12 c-0c1028">生日礼包</text>
        </view>
        <view class="flex-column flex-center-center">
          <u-image width="76rpx" height="76rpx" radius="76rpx" src="/static/user/qy-2.png"></u-image>
          <text class="fs-22 mt-12 c-0c1028">积分回馈</text>
        </view>
        <view class="flex-column flex-center-center">
          <u-image width="76rpx" height="76rpx" radius="76rpx" src="/static/user/qy-3.png"></u-image>
          <text class="fs-22 mt-12 c-0c1028">卡券兑换</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      defaultCurrent: 0,
    };
  },
  onLoad() {
    this.defaultCurrent = Number(this.userInfo.level_id) - 1
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    nextLevelInfo() {
      return (
        this.vipLeaveList.find(
          (item) => item.level_id == this.userInfo.level_id + 1
        ) || {}
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  background-color: #f7f8fa;
  padding: 32rpx;
  box-sizing: border-box;

  .quanyi {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    &>view {
      margin-top: 50rpx;
    }

    &:first-child {
      justify-self: start;
    }

    &:last-child {
      justify-self: end;
    }

    &* {
      justify-self: center;
    }
  }

  .swiper {
    height: 370rpx;

    .swiper-item {
      .dq-tag {
        position: absolute;
        top: 67rpx;
        left: 30rpx;
        z-index: 10;
        width: 120rpx;
        height: 40rpx;
        opacity: 1;
        border-radius: 20rpx 0rpx 20rpx 0rpx;
        background: rgba(255, 255, 255, 0.4);
        color: #3b3761;
        font-size: 22rpx;
        text-align: center;
        line-height: 40rpx;
      }

      .tip {
        position: absolute;
        left: 60rpx;
        bottom: 32rpx;
        font-size: 22rpx;
      }
    }
  }
}
</style>
